<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>

    </style>
</head>

<body>

    <div id="box">


    </div>


    <script src="./js/react.js"></script>
    <script src="./js/react-dom.js"></script>
    <script src="./js/prop-types.js"></script>
    <script src="./js/babel.min.js"></script>

    <script type="text/babel">

        // 定义一个类组件
        class Book extends React.Component{
            // 类的花括号里的this，就是对象本身。

            constructor(){
                super();
                // 定义状态：在state属性里
                this.state = {
                    author : "柴正盼",
                    price :21.5
                }                

                // 1、在构造函数里使用bind
                // this.changePrice01 = this.changePrice.bind(this);
                this.changePrice = this.changePrice.bind(this);
            }

            changePrice(){
                console.log("this",this);
                // 修改状态：使用setState
                this.setState({
                    price:this.state.price+1
                });             
            }

            // 3、定义函数时，使用箭头函数
            changePrice03=()=>{
                console.log("this",this);
                // 修改状态：使用setState
                this.setState({
                    price:this.state.price+1
                });             
            }

            changePrice04(){
                console.log("this",this);
                // 修改状态：使用setState
                this.setState({
                    price:this.state.price+1
                });             
            }

            render(){
                return (
                    <div>
                        <p>名字：{this.props.name}</p>
                        <p>作者：{this.state.author}</p>
                        <p>价格：{this.state.price}</p>
                        {/* <input type="button" value="修改价格01" onClick={this.changePrice01} /> */}
                        <input type="button" value="修改价格01" onClick={this.changePrice} />
                        <hr/>
                        {/* 2、在绑定事件时，直接使用bind */}
                        <input type="button" value="修改价格02" onClick={this.changePrice.bind(this)} />
                        <hr/>                        
                        <input type="button" value="修改价格03" onClick={this.changePrice03} />
                        {/* 4、在绑定事件时，直接使用箭头函数 */}
                        <hr/>                        
                        <input type="button" value="修改价格04" onClick={()=>this.changePrice04()} />
                        <hr/>
                    </div>
                )
            }

        }

        

        const root = (<div>
            <h1>组件：</h1>
            <Book name="如何让富婆爱上我"  />
        </div>
        );

        ReactDOM.render(root, document.getElementById("box"));


    </script>
</body>

</html>